<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>复合选择器</title>
        <style type="text/css">
            div { margin: 10px; border: 1px solid blue; }
            .odd { background-color: #dfdfdf; }
            .even { background-color: #ffff00; }

            /* 复合选择器(compound selector) */
            .odd.afang { 
                color: red; 
                font-size: 20px; /* 设置文字尺寸 */
                font-weight: bold; /* 设置文字粗细 */
                font-family: 宋体; /* 设置文字字体 */
            }

            /* 复合选择器(compound selector) */
            a:link { color: blue; text-decoration: none; }
            a:hover { color: green; }
            a:active { color: red; }
            a:visited { color: gray; }

            /* 复合选择器(compound selector) */
            .afang:hover { color: blue; }
        </style>
    </head>
    <body>
        <h3>复合选择器(compound selector)</h3>
        <p>
           A compound selector is a sequence of simple selectors that are not separated by a combinator, 
           and represents a set of simultaneous conditions on a single element.
        </p>
        <p>
            As whitespace represents the descendant combinator, 
            no whitespace is allowed between the simple selectors in a compound selector.
        </p>
        <p>
            If it contains a type selector or universal selector, that selector must come first in the sequence. 
            Only one type selector or universal selector is allowed in the sequence.
        </p>

        <div class="odd afang yuanfang">青海长云暗雪山</div>
        <div class="even afang">孤城遥望玉门关</div>
        <div class="odd aqin">黄沙百战穿金甲</div>
        <div class="even aqin">不破楼兰终不还</div>

        <p>
            <a href="http://www.kaifamiao.com">开发喵</a>
            |
            <a href="http://www.itlaobing.com">IT老兵</a>
        </p>
    </body>
</html>